<template>
    <div class="detail-container" >
      <h1>{{blog.title}}</h1>
      <div class="aside">
        <span>日期：{{formatDate(blog.createDate)}}</span>
        <span>浏览：{{blog.scanNumber}}</span>
        <span> <a href="#data-form-container">评论：{{blog.commentNumber}}</a></span>
        <span> <RouterLink :to="{
          name: '/Home/cate',
          params: {
            categoryId: blog.category.id
          }
        }">{{blog.category.name? blog.category.name : ''}}</RouterLink></span>
      </div>
      <div v-html="blog.htmlContent" class="markdown-body"></div>
    </div>
</template>

<script>
import formatDate from '../../../../utils/tool/formatDate'
import 'highlight.js/styles/github.css'
import '@/styles/markdown.css'
export default {
  name: 'index',
  props: {
    blog: {
      type: Object,
      required: true
    }
  },
  methods: {
    formatDate
  }
}
</script>

<style lang="less" scoped>
  @import "~@/styles/var";
.detail-container{
  .aside{
    font-size: 12px;
    color: @gray;
    span{
      margin-right: 15px;
    }
  }
  .markdown-body {
    margin: 2em 0;
  }
}
</style>
